import { useQuery } from "@apollo/client"
import { Link, useParams } from "react-router"
import { usePath } from "../../../hooks/usePath"
import { QueryTestGroupByIdResult, QueryTestGroupByIdQuery, QueryTestQuery, QueryTestResult } from "../../admin/test/group/page"
import { Image } from "antd"
import { joinPath } from "../../../libs/http-fetch"



const TestGroupPage = () => {
  const params = useParams()
  const groupId = parseInt(params.groupId || "0")
  const group = useQuery<QueryTestGroupByIdResult>(QueryTestGroupByIdQuery, {
    variables: {
      id: groupId
    }
  })
  const { data } = useQuery<QueryTestResult>(QueryTestQuery, {
    variables: {
      id: groupId
    }
  })
  const dataSource = data?.queryTests || []
  usePath([{ title: "模拟测试", href: "/test" }, { title: group.data?.queryTestGroupById.name || "" }])
  return (
    <div className="bg-white">
      <div className="text-center text-2xl">
        {group.data?.queryTestGroupById.name}
      </div>
      {dataSource.map((item) => {
        return (
          <div
            key={item.id}
            className="border-t border-dashed border-black py-2 flex"
          >
            <div className="w-1/2 flex justify-end items-center h-24">
              <Image
                src={joinPath(`/media/test/${item.id}/cover`)}
                width={100}
              />
            </div>
            <div className="w-1/2 h-24 flex items-center pl-2">
              <Link to={`/test/${groupId}/group/${item.id}/chapter`}>
                {item.name}
              </Link>
            </div>
          </div>
        )
      })}
    </div>
  )
}
export default TestGroupPage